<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>选课</title>
    <style>
        ul {
            list-style: none;
            display: flex;
        }
        li{
            margin: 0.5rem;
        }
        .book {
            width: min-content;
            border-radius: 8px;
            border: #ccc 1px solid;
        }
        .book-img {
            padding: 0.5rem;
            width: 7rem;
            height: 8rem;
            background: darkgreen;
            color: white;
            border-radius: 8px 8px 0 0 ;
        }
        .book-banner {
            /*padding: 0.25rem;*/
            font-weight: bold;
            width: 7rem;
            height: 2rem;
            border-radius: 0 0 8px 8px;
            border: 1px #eee ;
        }
        button {
            margin: 0 0.5rem 0.5rem;
        }
        small {
            font-size: small;
        }
    </style>
</head>
<body>
<h1>选课</h1>
<ul>
    <li>
        <div class="book" v-for=" i in lists" id="list">
            <div class="book-img"><h1 style="margin: 0" >封面</h1></div>
            <div class="book-banner">
                <small>{{i.bookname}}</small>
            </div>
            <button class="chose" value="{{i.id}}" onclick="send(this);">选课</button>
            <button disabled>{{i.status}}</button>
        </div>
    </li>
</ul>


<script>
    const app = {
        data() {
            return {
            lists : [{id:0,bookname:"bookName",status:"节课"}]
            }
        },methods,
        mounted() {
            axios.get("/api/course").then(response=>{this.lists = response})
        }
    }
    Vue.createApp(app).mount("#list")
</script>

</body>
</html>